<template>
  <div class="bigBox">
    <borderomponent>
      <div class="addMaterialWarehouseWrapper">
        <div style="margin: 21px 0 0 20px">
          <switchTab :tabArr="tabArr" @getTabindex="NewGetTabindex"></switchTab>
        </div>

        <div class="addMaterialWarehouseGroup" v-show="TabIndex == 0">
          <!-- <tx-button-add name="添加应急物资库" @click="addMw" /> -->
          <div class="el-from-box" v-if="dataList && dataList.length">
            <el-form
              v-for="(fromItem, index) in dataList"
              :model="fromItem.warehouseInfo"
              :rules="rules"
              :key="index"
              :ref="fromItem.id"
              label-width="140px"
              :class="['miBaseForm', fromItem.isChange ? '' : 'oldData']"
            >
              <div class="baseTitle">仓库信息</div>
              <el-form-item label="物资库名称:" prop="storeName">
                <div class="miTxt" v-if="!fromItem.isChange">
                  {{ fromItem.warehouseInfo.storeName || '--' }}
                </div>
                <el-input
                  v-else
                  placeholder="请输入物资库名称"
                  v-model="fromItem.warehouseInfo.storeName"
                ></el-input>
              </el-form-item>
              <el-form-item label="权属性质:" prop="storeNature">
                <div class="miTxt" v-if="!fromItem.isChange">
                  {{ fromItem.warehouseInfo.storeNature || '--' }}
                </div>
                <el-select
                  v-else
                  v-model="fromItem.warehouseInfo.storeNature"
                  placeholder="请选择权属性质"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓库面积(㎡):" prop="storeArea">
                <div class="miTxt" v-if="!fromItem.isChange">
                  {{ fromItem.warehouseInfo.storeArea || '--' }}
                </div>
                <el-input
                  v-else
                  placeholder="请输入仓库面积"
                  v-model="fromItem.warehouseInfo.storeArea"
                ></el-input>
              </el-form-item>
              <el-form-item label="物资库地址:" prop="address">
                <div class="miTxt" v-if="!fromItem.isChange">
                  {{ fromItem.warehouseInfo.address || '--' }}
                </div>
                <!-- <NewMap
              
                  @childByValue="childValue(fromItem.id, $event)"
                  :Newaddress="fromItem.warehouseInfo.address"
                  v-if="fromItem.isChange"
                ></NewMap> -->
                <el-input
                  v-else
                  placeholder="请输入关键词选择地址"
                  v-model="fromItem.warehouseInfo.address"
                >
                  <!-- <template slot="append">
                    <div class="append-wrapper append-cup">
                      <div class="append-txt">选择地址</div>
                      <i class="el-icon el-icon-address-outline"></i>
                    </div>
                  </template> -->
                </el-input>
              </el-form-item>
              <el-form-item label="负责人姓名:" prop="headName">
                <div class="miTxt" v-if="!fromItem.isChange">
                  {{ fromItem.warehouseInfo.headName || '--' }}
                </div>
                <el-input
                  v-else
                  placeholder="请输入负责人姓名"
                  v-model="fromItem.warehouseInfo.headName"
                ></el-input>
              </el-form-item>
              <el-form-item label="负责人电话:" prop="headPhone">
                <div class="miTxt" v-if="!fromItem.isChange">
                  {{ fromItem.warehouseInfo.headPhone || '--' }}
                </div>
                <el-input
                  v-else
                  placeholder="请输入负责人电话"
                  v-model="fromItem.warehouseInfo.headPhone"
                ></el-input>
              </el-form-item>
              <div
                class="baseFromBtn"
                v-if="fromItem.is_New_Add || fromItem.isChange"
              >
                <el-button @click="submitForm(fromItem)">保存</el-button>
                <el-button type="primary" @click="resetForm(fromItem)"
                  >删除</el-button
                >
              </div>
              <div
                class="baseFromBtn"
                v-if="!fromItem.is_New_Add && !fromItem.isChange"
              >
                <el-button @click="editForm(fromItem.id)">编辑</el-button>
              </div>
              <div class="miBaseFormContent">
                <div class="baseTitle mbn">
                  物资列表
                  <el-button
                    v-if="!fromItem.is_New_Add"
                    @click="lookDetail(fromItem)"
                    >详情<i
                      :class="[
                        fromItem.showDetail
                          ? 'el-icon-arrow-down el-icon--down'
                          : 'el-icon-arrow-right el-icon--right'
                      ]"
                    ></i
                  ></el-button>
                </div>
                <switchTab
                  :tabArr="fromItem.tabArr"
                  :currentId="fromItem.id"
                  @getTabindex="getTabindex"
                  style="margin-bottom: 21px"
                ></switchTab>
                <tx-button-add
                  name="添加物资"
                  @click="addMaterial(fromItem.id)"
                  style="margin-bottom: 21px"
                />
                <div v-show="fromItem.showDetail">
                  <div class="miBaseFormContentTable">
                    <tx-list-table
                      :table="fromItem.table"
                      ref="listTable"
                      row-key="name"
                    >
                      <tx-table-column-text label="物资类型" align="center">
                        <template slot-scope="scope">
                          <div v-if="!scope.row.editing">
                            <span>{{ scope.row.secondStoreType }}</span>
                          </div>
                          <div v-if="scope.row.editing">
                            <el-select
                              v-model="scope.row.secondStoreType"
                              placeholder="请选择物资类型"
                            >
                              <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </template>
                      </tx-table-column-text>
                      <tx-table-column-text label="物资名称" align="center">
                        <template slot-scope="scope">
                          <div v-if="!scope.row.editing">
                            <span>{{ scope.row.storeName }}</span>
                          </div>
                          <div v-if="scope.row.editing">
                            <el-input
                              v-model="scope.row.storeName"
                              class="input-table-edit"
                              placeholder="请输入物资名称"
                            ></el-input>
                          </div>
                        </template>
                      </tx-table-column-text>
                      <tx-table-column-text label="物资规格" align="center">
                        <template slot-scope="scope">
                          <div v-if="!scope.row.editing">
                            <span>{{ scope.row.storeSpecs }}</span>
                          </div>
                          <div v-if="scope.row.editing">
                            <el-input
                              v-model="scope.row.storeSpecs"
                              class="input-table-edit"
                              placeholder="请输入物资规格"
                            ></el-input>
                          </div>
                        </template>
                      </tx-table-column-text>
                      <tx-table-column-text label="物资数量" align="center">
                        <template slot-scope="scope">
                          <div v-if="!scope.row.editing">
                            <span>{{ scope.row.storeNum }}</span>
                          </div>
                          <div v-if="scope.row.editing">
                            <el-input
                              v-model="scope.row.storeNum"
                              class="input-table-edit"
                              placeholder="请输入物资数量"
                            ></el-input>
                          </div>
                        </template>
                      </tx-table-column-text>
                      <tx-table-column-text label="物资单位" align="center">
                        <template slot-scope="scope">
                          <div v-if="!scope.row.editing">
                            <span>{{ scope.row.unit }}</span>
                          </div>
                          <div v-if="scope.row.editing">
                            <el-input
                              v-model="scope.row.unit"
                              class="input-table-edit"
                              placeholder="请输入物资单位"
                            ></el-input>
                          </div>
                        </template>
                      </tx-table-column-text>
                      <tx-table-column-action
                        label="操作项"
                        width="270px"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <el-button
                            type="primary"
                            size="mini"
                            v-if="!scope.row.editing"
                            class="table-edit-btn"
                            @click="handleEdit(scope, fromItem.id)"
                            >编辑
                          </el-button>
                          <el-button
                            type="primary"
                            size="mini"
                            v-if="scope.row.editing"
                            @click="handleSave(scope, fromItem.id)"
                            class="table-save-btn"
                            >保存
                          </el-button>
                          <el-button
                            size="mini"
                            type="warning"
                            v-if="scope.row.editing"
                            @click="handleCancel(scope, fromItem.id)"
                            class="table-cancel-btn"
                            >取消
                          </el-button>
                          <el-button
                            size="mini"
                            type="danger"
                            v-if="scope.row.editing"
                            @click="handleDelete(scope, fromItem.id)"
                            class="table-del-btn"
                            >删除
                          </el-button>
                        </template>
                      </tx-table-column-action>
                    </tx-list-table>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <div v-show="TabIndex != 0" style="margin: 20px 0 0 20px">
          <Sort></Sort>
        </div>
      </div>
    </borderomponent>
  </div>
</template>

<script>
import borderomponent from '@/components/borderomponent/index.vue'
import switchTab from '@/components/switchTab/index.vue'
import { checkTel, checkDecimalOrNumber } from '@/utils/rules'
import Sort from './components/sort.vue'
import {
  storeInfoDelById,
  storeInfoList,
  storeInfoSaveOrUpdate,
  storeInfoGetById,
  storeInfoGetByDepId
} from '@/api/resourceManagement/index.js'
export default {
  name: 'TeamAdministrator',
  components: {
    borderomponent,
    switchTab,
    Sort
    // NewMap,
  },
  data() {
    return {
      tabArr: [
        {
          name: '仓库详情',
          index: 0
        },
        {
          name: '仓库人员',
          index: 1
        }
      ],
      TabIndex: 0,
      options: [
        {
          label: '自有',
          value: '自有'
        },
        {
          label: '租用',
          value: '租用'
        },
        {
          label: '借用',
          value: '借用'
        }
      ],
      options2: [
        {
          label: '被服类',
          value: '被服类'
        },
        {
          label: '安置类',
          value: '安置类'
        },
        {
          label: '装具类',
          value: '装具类'
        },
        {
          label: '装备类',
          value: '装备类'
        },
        {
          label: '其他类',
          value: '其他类'
        }
      ],
      rules: {
        storeName: [
          {
            required: true,
            message: '请输入物资库名称',
            trigger: ['blur', 'change']
          }
        ],
        storeNature: [
          {
            required: true,
            message: '请选择权属性质',
            trigger: ['blur', 'change']
          }
        ],
        address: [
          {
            required: true,
            message: '请输入物资库地址',
            trigger: ['blur', 'change']
          }
        ],
        headName: [
          {
            required: true,
            message: '请输入负责人',
            trigger: ['blur', 'change']
          }
        ],
        headPhone: [
          {
            required: true,
            message: '请输入负责人电话',
            trigger: ['blur', 'change']
          },
          {
            validator: checkTel,
            trigger: ['blur', 'change']
          }
        ],
        storeArea: [
          {
            required: true,
            message: '请输入仓库占面积',
            trigger: ['blur', 'change']
          },
          {
            validator: checkDecimalOrNumber,
            trigger: ['blur', 'change']
          }
        ]
      },
      itemObj: {
        id: 'id01',
        is_New_Add: false,
        showDetail: false,
        isChange: false,
        currentIndex: 0,
        warehouseInfo: {
          address: '',
          coordinateX: '',
          coordinateY: '',
          headName: '',
          headPhone: '',
          state: '',
          storeArea: null,
          storeName: '',
          storeNature: ''
        },
        tabArr: [
          {
            name: '防火类(0)',
            index: 0
          },
          {
            name: '防汛类(0)',
            index: 1
          },
          {
            name: '抗震救灾类(0)',
            index: 2
          },
          {
            name: '救灾物资类(0)',
            index: 3
          },
          {
            name: '其他(0)',
            index: 4
          }
        ],
        currentTables: {},
        table: {
          loading: false,
          query: {},
          sort: {
            descs: ['updateTime']
          },
          page: {
            records: []
          }
        },
        fireproof: [],
        floodPrevention: [],
        antiSeismic: [],
        disasterRelief: [],
        otherroof: []
      },
      dataList: []
    }
  },
  // watch: {
  //   $route(to, from) {

  //     window.location.reload() // 这个方法可行 直接就强制刷新
  //   }
  // },
  mounted() {
    this.loadTable()
    this.newStoreInfoGetById()
  },
  methods: {
    // 物资详情
    newStoreInfoGetById() {
      storeInfoGetById({ id: this.$userInfo.orgId }).then(res => {
        console.log(res, '物资详情')
      })
    },
    // 切换
    NewGetTabindex(e) {
      this.TabIndex = e
    },
    childValue(prop, e) {
      this.dataList = this.dataList.map(item => {
        console.log(prop, e.address, item)
        if (item.id == prop) {
          let warehouseInfo = item.warehouseInfo
          warehouseInfo.address = e.address
          warehouseInfo.coordinateX = e.latitude
          warehouseInfo.coordinateY = e.longitude
          item.warehouseInfo = warehouseInfo
        }
        return item
      })
      setTimeout(() => {
        this.$refs[`${prop}`][0].clearValidate(['address'])
      }, 200)
    },
    editForm(id) {
      this.dataList = this.dataList.map(item => {
        if (item.id === id) {
          item.isChange = true
        }
        return item
      })
    },
    submitForm(fromItem) {
      console.log('fromItem', fromItem)
      this.$refs[`${fromItem.id}`][0].validate(valid => {
        if (fromItem.warehouseInfo.address) {
          this.$refs[`${fromItem.id}`][0].clearValidate(['address'])
        }
        if (valid) {
          const paramObj = fromItem.warehouseInfo
          let materialsList = fromItem.fireproof.concat(
            fromItem.floodPrevention,
            fromItem.antiSeismic
          )
          materialsList = materialsList.concat(
            fromItem.disasterRelief,
            fromItem.otherroof
          )
          paramObj.materialsList = materialsList.filter(item => {
            return !item.is_New_Add
          })
          storeInfoSaveOrUpdate(paramObj).then(res => {
            console.log('storeInfoSaveOrUpdate', res, paramObj)
            if (res.code === 0) {
              this.dataList = this.dataList.map(item => {
                if (item.id === fromItem.id) {
                  item.isChange = false
                  item.is_New_Add = false
                  item.showDetail = false
                  if (!paramObj.id) {
                    item.id = res.data
                    item.warehouseInfo.id = res.data
                  }
                }
                return item
              })
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm(fromItem) {
      const id = fromItem.id
      this.$confirm('删除仓库，仓库下物资也会清除，请确认是否删除！！！')
        .then(res => {
          if (res === 'confirm') {
            if (fromItem.is_New_Add) {
              this.$refs[`${id}`][0].clearValidate()
              this.dataList = this.dataList.filter(item => {
                return item.id !== id
              })
              return
            }
            storeInfoDelById({ id: id }).then(res => {
              if (res.code === 0) {
                this.$refs[`${id}`][0].clearValidate()
                this.dataList = this.dataList.filter(item => {
                  return item.id !== id
                })
              }
            })
          }
        })
        .catch(() => {})
    },
    addMw() {
      if (
        this.dataList &&
        this.dataList.length &&
        this.dataList[0].is_New_Add
      ) {
        return
      }
      const itemObj = JSON.parse(JSON.stringify(this.itemObj))
      itemObj.is_New_Add = true
      itemObj.showDetail = true
      itemObj.isChange = true
      this.dataList.unshift(itemObj)
    },
    addMaterial(id) {
      this.dataList = this.dataList.map(item => {
        if (item.id === id) {
          this.$yzvue.newAddItem(item.table.page)
        }
        return item
      })
    },
    lookDetail(fromItem) {
      const id = fromItem.id
      if (fromItem.showDetail) {
        this.dataList = this.dataList.map(item => {
          if (item.id === id) {
            item.showDetail = !item.showDetail
          }
          return item
        })
        return
      }
      storeInfoGetById({ id: id }).then(res => {
        if (res.code === 0) {
          this.dataList = this.dataList.map(item => {
            if (item.id === id) {
              item.showDetail = !item.showDetail
              item.fireproof = res.data.materialsList1
              item.floodPrevention = res.data.materialsList2
              item.antiSeismic = res.data.materialsList3
              item.disasterRelief = res.data.materialsList4
              item.otherroof = res.data.materialsList5
              item.currentIndex = 0
              item.table.page.records = item.fireproof
              item.tabArr = [
                {
                  name: `防火类(${res.data.materialsList1.length})`,
                  index: 0
                },
                {
                  name: `防汛类(${res.data.materialsList2.length})`,
                  index: 1
                },
                {
                  name: `抗震救灾类(${res.data.materialsList3.length})`,
                  index: 2
                },
                {
                  name: `救灾物资类(${res.data.materialsList4.length})`,
                  index: 3
                },
                {
                  name: `其他(${res.data.materialsList5.length})`,
                  index: 4
                }
              ]
            }
            return item
          })
          console.log(this.dataList)
        }
      })
    },
    getTabindex(e, id) {
      this.dataList = this.dataList.map(item => {
        if (item.id === id) {
          item.currentIndex = e
        }
        if (e === 0) {
          item.table.page.records = item.fireproof
        }
        if (e === 1) {
          item.table.page.records = item.floodPrevention
        }
        if (e === 2) {
          item.table.page.records = item.antiSeismic
        }
        if (e === 3) {
          item.table.page.records = item.disasterRelief
        }
        if (e === 4) {
          item.table.page.records = item.otherroof
        }
        return item
      })
    },
    async loadTable() {
      // 请求初始化数据

      storeInfoGetByDepId({ depId: this.$userInfo.orgId }).then(res => {
        console.log(res, this.dataList)
        this.dataList = res.data.map(item => {
          console.log(res, item)

          const itemObj = JSON.parse(JSON.stringify(this.itemObj))
          itemObj.id = item.id
          itemObj.warehouseInfo = Object.assign(itemObj.warehouseInfo, item)
          itemObj.tabArr = [
            {
              name: `防火类(${item.protectNum})`,
              index: 0
            },
            {
              name: `防汛类(${item.floodNum})`,
              index: 1
            },
            {
              name: `抗震救灾类(${item.shockproofNum})`,
              index: 2
            },
            {
              name: `救灾物资类(${item.disasterNum})`,
              index: 3
            },
            {
              name: `其他(${item.otherNum})`,
              index: 4
            }
          ]
          return itemObj
        })

        console.log(this.dataList)
      })
    },
    // 编辑
    handleEdit($scope, id) {
      console.log('handleEdit', $scope, id)
      let {
        scope: { scope }
      } = $scope
      this.dataList = this.dataList.map(item => {
        if (item.id === id) {
          this.$set(item.table.page.records[scope.$index], 'editing', true)
          item.currentTables = JSON.parse(
            JSON.stringify(item.table.page.records[scope.$index])
          )
        }
        return item
      })
    },
    // 保存
    handleSave($scope, id) {
      let {
        scope: { scope }
      } = $scope
      const row = scope.row
      if (
        !row.secondStoreType ||
        !row.storeName ||
        !row.storeSpecs ||
        !row.storeNum ||
        !row.unit
      ) {
        this.$message({
          message: '请完善物资信息！',
          type: 'warning'
        })
        return
      }
      this.dataList = this.dataList.map(item => {
        if (item.id === id) {
          if (item.currentIndex === 0) {
            this.$set(
              item.table.page.records[scope.$index],
              'firstStoreType',
              '01'
            )
            item.fireproof = item.table.page.records
          }
          if (item.currentIndex === 1) {
            this.$set(
              item.table.page.records[scope.$index],
              'firstStoreType',
              '02'
            )
            item.floodPrevention = item.table.page.records
          }
          if (item.currentIndex === 2) {
            this.$set(
              item.table.page.records[scope.$index],
              'firstStoreType',
              '03'
            )
            item.antiSeismic = item.table.page.records
          }
          if (item.currentIndex === 3) {
            this.$set(
              item.table.page.records[scope.$index],
              'firstStoreType',
              '04'
            )
            item.disasterRelief = item.table.page.records
          }
          if (item.currentIndex === 4) {
            this.$set(
              item.table.page.records[scope.$index],
              'firstStoreType',
              '05'
            )
            item.otherroof = item.table.page.records
          }
          item.tabArr = [
            {
              name: `防火类(${item.fireproof.length})`,
              index: 0
            },
            {
              name: `防汛类(${item.floodPrevention.length})`,
              index: 1
            },
            {
              name: `抗震救灾类(${item.antiSeismic.length})`,
              index: 2
            },
            {
              name: `救灾物资类(${item.disasterRelief.length})`,
              index: 3
            },
            {
              name: `其他(${item.otherroof.length})`,
              index: 4
            }
          ]

          if (scope.row.is_New_Add) {
            this.$set(
              item.table.page.records[scope.$index],
              'is_New_Add',
              false
            )
          }
          this.$set(item.table.page.records[scope.$index], 'editing', false)

          const paramObj = item.warehouseInfo
          let materialsList = item.fireproof.concat(
            item.floodPrevention,
            item.antiSeismic
          )
          materialsList = materialsList.concat(
            item.disasterRelief,
            item.otherroof
          )
          paramObj.materialsList = materialsList.filter(item => {
            return !item.is_New_Add
          })
          storeInfoSaveOrUpdate(paramObj)
            .then(res => {
              if (res.code !== 0) {
                if (scope.row.is_New_Add) {
                  this.$set(
                    item.table.page.records[scope.$index],
                    'is_New_Add',
                    true
                  )
                }
                this.$set(
                  item.table.page.records[scope.$index],
                  'editing',
                  true
                )
              } else {
                item.currentTables = {}
              }
            })
            .catch(() => {
              if (scope.row.is_New_Add) {
                this.$set(
                  item.table.page.records[scope.$index],
                  'is_New_Add',
                  true
                )
              }
              this.$set(item.table.page.records[scope.$index], 'editing', true)
            })
        }
        return item
      })
      console.log(this.dataList)
    },
    // 取消
    handleCancel($scope, id) {
      let {
        scope: { scope }
      } = $scope
      this.dataList = this.dataList.map(item => {
        if (item.id === id) {
          if (scope.row.is_New_Add) {
            item.table.page.records = item.table.page.records.filter(item => {
              return !item.is_New_Add
            })
            return item
          }
          this.$set(item.table.page.records, scope.$index, {
            ...item.currentTables,
            editing: false
          })
        }
        return item
      })
    },
    //删除
    handleDelete($scope, id) {
      let {
        scope: { scope }
      } = $scope

      this.$confirm('确认删除？')
        .then(res => {
          if (res === 'confirm') {
            this.dataList = this.dataList.map(itr => {
              const item = JSON.parse(JSON.stringify(itr))
              if (item.id === id) {
                item.table.page.records.splice(scope.$index, 1)
                if (item.currentIndex === 0) {
                  item.fireproof = item.table.page.records
                }
                if (item.currentIndex === 1) {
                  item.floodPrevention = item.table.page.records
                }
                if (item.currentIndex === 2) {
                  item.antiSeismic = item.table.page.records
                }
                if (item.currentIndex === 3) {
                  item.disasterRelief = item.table.page.records
                }
                if (item.currentIndex === 4) {
                  item.otherroof = item.table.page.records
                }

                const paramObj = item.warehouseInfo
                let materialsList = item.fireproof.concat(
                  item.floodPrevention,
                  item.antiSeismic
                )
                materialsList = materialsList.concat(
                  item.disasterRelief,
                  item.otherroof
                )
                paramObj.materialsList = materialsList.filter(item => {
                  return !item.is_New_Add
                })
                storeInfoSaveOrUpdate(paramObj).then(res => {
                  if (res.code === 0) {
                    itr.table.page.records.splice(scope.$index, 1)
                    itr.tabArr = [
                      {
                        name: `防火类(${itr.fireproof.length})`,
                        index: 0
                      },
                      {
                        name: `防汛类(${itr.floodPrevention.length})`,
                        index: 1
                      },
                      {
                        name: `抗震救灾类(${itr.antiSeismic.length})`,
                        index: 2
                      },
                      {
                        name: `救灾物资类(${itr.disasterRelief.length})`,
                        index: 3
                      },
                      {
                        name: `其他(${itr.otherroof.length})`,
                        index: 4
                      }
                    ]
                  }
                })
              }
              return itr
            })
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  width: 100%;
  height: 100%;
  .addMaterialWarehouseWrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .addMaterialWarehouseGroup {
      box-sizing: border-box;
      padding: 17px;
      ::v-deep .el-button {
        color: #fff;
        height: 32px;
        padding: 0 20px;
      }
      .baseFromBtn {
        position: absolute;
        top: 17px;
        right: 17px;
        ::v-deep .el-button {
          padding: 0 15px;
        }
        ::v-deep .el-button--default {
          background-color: rgba(56, 194, 198, 1);
        }
        ::v-deep .el-button--primary {
          background-color: rgba(29, 90, 143, 1);
        }
      }
      .miTxt {
        font-size: 16px;
        color: #fff;
      }
    }
  }
}
.el-icon-add-user {
  width: 14px;
  height: 14px;
  background-image: url(~@/assets/icons/input_box-contacts@2x.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.append-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  &.append-cup {
    cursor: pointer;
  }
  .el-icon {
    margin-left: 5px;
  }
}
::v-deep .el-form-item__label {
  font-size: 16px;
  color: #cbe7ff;
}
::v-deep .el-input-group__append {
  background-color: rgba(124, 173, 216, 0.2);
  border-left: 1px solid;
  border-color: #7cadd8;
  color: #cbe7ff;
  .el-icon-location-outline {
    font-size: 15px;
    color: #fff;
  }
}
.miBaseForm {
  display: flex;
  flex-wrap: wrap;
  padding: 17px 17px 0 17px;
  border: 1px solid rgba(0, 153, 255, 0.5);
  margin-top: 17px;
  position: relative;
  ::v-deep .el-form-item {
    width: 33.33333%;
    flex: 0 0 33.33333%;
  }
  &.oldData {
    ::v-deep .el-form-item__label::before {
      display: none;
    }
  }
}
.miBaseFormContent {
  width: 100%;
  flex: 0 0 100%;
  .miBaseFormContentTable {
    // padding-top: 17px;
  }
}
.baseTitle {
  width: 100%;
  flex: 0 0 100%;
  font-size: 18px;
  color: #4af6fc;
  padding-left: 32px;
  background-position: left center;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-image: url(~@/assets/icons/icon_insurance_institute@2x.png);
  margin-bottom: 27px;
  box-sizing: border-box;
  &.mbn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
    ::v-deep .el-button {
      background-color: rgb(56, 194, 198);
      padding: 0 10px !important;
      .el-icon-arrow-down {
        padding-left: 10px;
      }
    }
  }
}
::v-deep .el-form-item__label {
  line-height: 32px;
}
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
  background-color: transparent;
  border-color: rgba(124, 173, 216, 1);
  &::placeholder {
    color: #7cadd8;
  }
}
::v-deep .el-form-item__content {
  line-height: 32px;
}
::v-deep .el-table__empty-block {
  padding-top: 30px;
}
::v-deep .el-input__icon {
  line-height: 32px;
}
.chengyuanxiangqing {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut(3).png');
}
.zhedie {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut(2).png');
}
.zhankai {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut(1).png');
}
.geren {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut.png');
}
.dialogBox-box-right {
  border-left: 1px solid #1d5a8f;
  padding-left: 8px;
}
.dialogBox-box-left {
  padding-right: 8px;
}
</style>
